CSS Logical Properties Level 2: Bouwen aan een Echt Wereldwijd Web met Verbeterde Ondersteuning voor Schrijfmodi

Decennialang hebben webontwikkelaars lay-outs gebouwd met een vocabulaire dat geworteld is in de fysieke wereld: top, bottom, left, en right. We stelden een margin-left, een padding-top en een border-right in. Dit mentale model was prima toen het web voornamelijk een links-naar-rechts, boven-naar-beneden medium was. Het web is echter wereldwijd. Het is een platform voor alle talen en culturen, waarvan vele deze eenvoudige directionele stroom niet volgen.

Talen zoals Arabisch en Hebreeuws worden van rechts naar links geschreven. Traditioneel Japans en Chinees kunnen verticaal worden geschreven, van boven naar beneden en van rechts naar links. Het forceren van een fysiek, links-naar-rechts CSS-model op deze schrijfsystemen leidt tot gebroken lay-outs, een frustrerende gebruikerservaring en een berg aan code-overrides. Dit is waar CSS Logical Properties en Values om de hoek komen kijken, en een fundamentele paradigmaverschuiving vertegenwoordigen van fysieke richtingen naar flow-relatieve, logische richtingen. Terwijl Level 1 de basis legde, maakt CSS Logical Properties Level 2 het plaatje compleet en biedt het de tools die we nodig hebben om echt universele, schrijfmodus-bewuste gebruikersinterfaces te bouwen.

Deze uitgebreide gids neemt je mee op een diepgaande verkenning van de verbeteringen die Level 2 met zich meebrengt. We beginnen met een opfrissing van de kernconcepten, verkennen vervolgens de nieuwe properties en waarden die de hiaten opvullen, en brengen ten slotte alles in de praktijk door een component te bouwen dat zich naadloos aanpast aan elke schrijfmodus. Bereid je voor om de manier waarop je over CSS-lay-out denkt voorgoed te veranderen.

Een Snelle Opfrisser: De Kernconcepten van Logical Properties (Level 1)

Voordat we de toevoegingen in Level 2 kunnen waarderen, moeten we een solide begrip hebben van de basis die door Level 1 is gelegd. Het hele systeem is gebouwd op twee sleutelconcepten: de writing mode (schrijfmodus) en de daaruit voortvloeiende block- en inline-assen.

De Vier Schrijfmodi

De writing-mode CSS-property bepaalt de richting waarin tekst wordt opgemaakt. Hoewel we de standaardinstelling vaak als vanzelfsprekend beschouwen, zijn er verschillende waarden die de stroom van content op de pagina fundamenteel veranderen:

• horizontal-tb: Dit is de standaard voor de meeste westerse talen. Tekst vloeit horizontaal (inline-as) van links naar rechts (of rechts naar links op basis van de richting), en regels stapelen zich van boven naar beneden (block-as).
• vertical-rl: Gebruikt voor traditionele Oost-Aziatische typografie (bijv. Japans, Chinees). Tekst vloeit verticaal van boven naar beneden (inline-as), en regels stapelen zich van rechts naar links (block-as).
• vertical-lr: Vergelijkbaar met het bovenstaande, maar regels stapelen zich van links naar rechts (block-as). Minder gebruikelijk, maar wordt in sommige contexten gebruikt, zoals het Mongoolse schrift.
• sidelong-rl / sidelong-lr: Deze zijn voor specifieke use-cases waarbij je lettertekens op hun kant wilt leggen. Ze zijn minder gebruikelijk in algemene webcontent.

Het Cruciale Concept: Block- versus Inline-as

Dit is het belangrijkste concept om te begrijpen. In een logische wereld stoppen we met denken in termen van "verticaal" en "horizontaal" en beginnen we te denken in termen van de block- en inline-assen. Hun oriëntatie hangt volledig af van de writing-mode.

• De Inline-as is de richting waarin tekst binnen één regel vloeit.
• De Block-as is de richting waarin nieuwe regels worden gestapeld.

Laten we kijken hoe dit uitpakt:

• In standaard Engels (writing-mode: horizontal-tb): De inline-as loopt horizontaal, en de block-as loopt verticaal.
• In traditioneel Japans (writing-mode: vertical-rl): De inline-as loopt verticaal, en de block-as loopt horizontaal.

Omdat deze assen kunnen wisselen, worden properties zoals width en height dubbelzinnig. Is width de grootte langs de horizontale as of de inline-as? Logische properties lossen deze dubbelzinnigheid op. We hebben nu start en end voor elke as:

• block-start: De "bovenkant" in het Engels, maar de "rechterkant" in verticaal Japans.
• block-end: De "onderkant" in het Engels, maar de "linkerkant" in verticaal Japans.
• inline-start: De "linkerkant" in het Engels, maar de "bovenkant" in verticaal Japans.
• inline-end: De "rechterkant" in het Engels, maar de "onderkant" in verticaal Japans.

Fysieke naar Logische Properties Mappen (Level 1)

Level 1 introduceerde een uitgebreide set van mappings van fysieke naar logische properties. Hier zijn een paar belangrijke voorbeelden:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (voor positionering) → inset-inline-start / inset-inline-end
• top / bottom (voor positionering) → inset-block-start / inset-block-end

Level 1 gaf ons ook nuttige shorthands zoals margin-inline (voor start en end) en padding-block (voor start en end).

Welkom bij Level 2: Wat is Nieuw en Waarom is het Belangrijk

Hoewel Level 1 een monumentale stap voorwaarts was, liet het enkele merkbare hiaten achter. Bepaalde fundamentele CSS-properties zoals float, clear en resize hadden geen logische equivalenten. Bovendien konden properties zoals border-radius niet logisch worden beheerd, waardoor ontwikkelaars moesten terugvallen op fysieke properties voor fijnmazige styling. Dit betekende dat je een lay-out voor 90% met logische properties kon bouwen, maar nog steeds fysieke overrides nodig had voor verschillende schrijfmodi, wat het doel gedeeltelijk tenietdeed.

CSS Logical Properties Level 2 pakt deze tekortkomingen direct aan. Het gaat niet om de introductie van een radicaal nieuw systeem, maar om het voltooien van het systeem dat in Level 1 is gestart. Dit wordt op twee primaire manieren bereikt:

1. Introductie van nieuwe logische properties en waarden voor oudere CSS-functies die inherent fysiek waren (zoals float).
2. Toevoegen van logische property-mappings voor complexe shorthands die voorheen werden genegeerd (zoals border-radius).

Met Level 2 is de visie van een volledig flow-relatief stylingsysteem bijna compleet, waardoor we complexe, mooie en robuuste componenten kunnen bouwen die overal, voor iedereen, werken zonder hacks of overrides.

Diepgaande Verkenning: Nieuwe Logische Waarden en Properties in Level 2

Laten we de meest impactvolle toevoegingen verkennen die Level 2 aan onze ontwikkelaarstoolkit toevoegt. Dit zijn de tools die de hiaten opvullen en echt universeel componentontwerp mogelijk maken.

Float en Clear: De Logische Revolutie

De float-property is al jaren een hoeksteen van CSS-lay-out, maar de waarden, left en right, zijn de definitie van fysieke richting. Als je een afbeelding naar links van een paragraaf in het Engels float, ziet het er correct uit. Maar schakel de documentrichting over naar rechts-naar-links (RTL) voor Arabisch, en de afbeelding staat nu aan de "verkeerde" kant van het tekstblok. Het zou aan de rechterkant moeten staan, wat het begin van de regel is.

Level 2 introduceert twee nieuwe, logische sleutelwoorden voor de float-property:

• float: inline-start; Dit plaatst een element aan het begin van de inline-richting. In LTR-talen is dit links. In RTL-talen is dit rechts. In een vertical-rl schrijfmodus is dit bovenaan.
• float: inline-end; Dit plaatst een element aan het einde van de inline-richting. In LTR is dit rechts. In RTL is dit links. In vertical-rl is dit onderaan.

Op dezelfde manier krijgt de clear-property, die wordt gebruikt om de tekstomloop rond gefloate elementen te beheersen, zijn logische tegenhangers:

• clear: inline-start; Stopt de omloop van floats aan de inline-start-zijde.
• clear: inline-end; Stopt de omloop van floats aan de inline-end-zijde.

Dit is een gamechanger. Je kunt nu klassieke lay-outs met afbeelding-en-tekstomloop maken die zich automatisch aanpassen aan elke taalrichting zonder een enkele regel extra CSS.

Verbeterde Controle met Logische Resize

De resize-property, vaak gebruikt op een textarea, stelt gebruikers in staat een element van grootte te veranderen. De traditionele waarden zijn horizontal, vertical en both. Maar wat betekent "horizontaal" in een verticale schrijfmodus? Het betekent nog steeds het vergroten/verkleinen langs de fysieke horizontale as, wat misschien niet is wat de gebruiker of ontwerper bedoelt. De gebruiker wil waarschijnlijk het element langs de inline-as vergroten om regels langer of korter te maken.

Level 2 introduceert logische waarden voor resize:

• resize: inline; Maakt het mogelijk de grootte aan te passen langs de inline-as.
• resize: block; Maakt het mogelijk de grootte aan te passen langs de block-as.

Het gebruik van resize: block; op een textarea in het Engels stelt de gebruiker in staat om het hoger te maken. Het gebruik ervan in een verticale schrijfmodus stelt de gebruiker in staat om het breder te maken (wat de block-richting is). Het werkt gewoon.

`caption-side`: Logische Positionering voor Tabelbijschriften

De caption-side-property bepaalt de plaatsing van het caption (bijschrift) van een tabel. De oude waarden waren top en bottom. Nogmaals, dit zijn fysieke waarden. Als de bedoeling van een ontwerper is om het bijschrift "voor" de inhoud van de tabel te plaatsen, werkt top voor horizontale schrijfmodi. Maar in een vertical-rl modus bevindt de "start" van de block-flow zich aan de rechterkant, niet aan de bovenkant.

Level 2 biedt de logische oplossing:

• caption-side: block-start; Plaatst het bijschrift aan het begin van de block-flow.
• caption-side: block-end; Plaatst het bijschrift aan het einde van de block-flow.

`text-align`: Een Fundamentele Logische Waarde

Hoewel de waarden start en end voor text-align al een tijdje bestaan, vormen ze een kernonderdeel van de filosofie van logische properties en zijn ze het waard om te benadrukken. Het gebruik van text-align: left; is een veelgemaakte fout die onmiddellijk lay-outproblemen veroorzaakt in RTL-talen. De correcte, moderne aanpak is om altijd te gebruiken:

• text-align: start; Lijnt tekst uit aan het begin van de inline-richting.
• text-align: end; Lijnt tekst uit aan het einde van de inline-richting.

Het Kroonjuweel van Level 2: Logische `border-radius`

Misschien wel de belangrijkste en krachtigste toevoeging in Level 2 is de set properties voor het logisch beheren van border-radii. Voorheen, als je wilde dat een kaart alleen aan de "bovenkant" afgeronde hoeken had, zou je border-top-left-radius en border-top-right-radius gebruiken. Dit valt volledig uit elkaar in een verticale schrijfmodus, waar de "bovenste" hoeken nu de start-start en end-start hoeken zijn.

Level 2 introduceert vier nieuwe longhand-properties die op een flow-relatieve manier overeenkomen met de vier hoeken van een element. De naamgevingsconventie is border-[block-rand]-[inline-rand]-radius.

• border-start-start-radius: De hoek waar de block-start- en inline-start-zijden samenkomen.
• border-start-end-radius: De hoek waar de block-start- en inline-end-zijden samenkomen.
• border-end-start-radius: De hoek waar de block-end- en inline-start-zijden samenkomen.
• border-end-end-radius: De hoek waar de block-end- en inline-end-zijden samenkomen.

Dit kan in het begin lastig te visualiseren zijn, dus laten we het uittekenen voor verschillende schrijfmodi:

`border-radius` Mappen in `writing-mode: horizontal-tb` (bijv. Engels)

• border-start-start-radius komt overeen met top-left-radius.
• border-start-end-radius komt overeen met top-right-radius.
• border-end-start-radius komt overeen met bottom-left-radius.
• border-end-end-radius komt overeen met bottom-right-radius.

`border-radius` Mappen in `writing-mode: horizontal-tb` met `dir="rtl"` (bijv. Arabisch)

Hier wordt de inline-richting omgedraaid.

• border-start-start-radius komt overeen met top-right-radius. (Block-start is boven, inline-start is rechts).
• border-start-end-radius komt overeen met top-left-radius.
• border-end-start-radius komt overeen met bottom-right-radius.
• border-end-end-radius komt overeen met bottom-left-radius.

`border-radius` Mappen in `writing-mode: vertical-rl` (bijv. Japans)

Hier zijn beide assen gedraaid.

• border-start-start-radius komt overeen met top-right-radius. (Block-start is rechts, inline-start is boven).
• border-start-end-radius komt overeen met bottom-right-radius.
• border-end-start-radius komt overeen met top-left-radius.
• border-end-end-radius komt overeen met bottom-left-radius.

Door deze nieuwe properties te gebruiken, kun je hoekradii definiëren die semantisch verbonden zijn met de stroom van de content, niet met het fysieke scherm. Een "start-start"-hoek zal altijd de juiste hoek zijn, ongeacht taal of tekstrichting.

Praktische Implementatie: Een Wereldwijd-Klaar Component Bouwen

Theorie is geweldig, maar laten we zien hoe dit in de praktijk werkt. We bouwen een eenvoudig profielkaart-component, eerst met de oude fysieke properties, en refactoren het vervolgens om moderne logische properties van zowel Level 1 als Level 2 te gebruiken.

De kaart heeft een afbeelding die naar één kant gefloat is, een titel, wat tekst, en een decoratieve rand en afgeronde hoeken.

De "Oude" Manier: Een Breekbare, Fysieke-Property Kaart

Zo zouden we deze kaart een paar jaar geleden gestyled hebben:

/* --- CSS (Fysieke Properties) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

In een standaard Engelse LTR-context ziet dit er prima uit. Maar als we dit in een container met dir="rtl" of writing-mode: vertical-rl plaatsen, breekt de lay-out. De decoratieve rand zit aan de verkeerde kant, de avatar zit aan de verkeerde kant, de marge is incorrect en de afgeronde hoeken zijn verkeerd geplaatst.

De "Nieuwe" Manier: Een Robuuste, Logische-Property Kaart

Laten we nu hetzelfde component refactoren met behulp van logische properties. We maken gebruik van properties van zowel Level 1 als de nieuwe toevoegingen van Level 2.

/* --- CSS (Logische Properties) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` shorthand is al logisch! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* Kracht van Level 2! */

  border-end-start-radius: 8px; /* Kracht van Level 2! */

}

.logical-card .avatar {

  float: inline-start; /* Kracht van Level 2! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Testen en Verificatie

Met deze nieuwe CSS kun je het component in elke container plaatsen, en het zal zich automatisch aanpassen.

• In een LTR-context: Het zal er identiek uitzien als de originele fysieke versie.
• In een RTL-context (dir="rtl"): De avatar zal naar rechts floaten, de marge zal aan de linkerkant zitten, de decoratieve rand zal aan de rechterkant zijn en de tekst zal aan het begin uitgelijnd zijn (naar rechts). De afgeronde hoeken zullen correct rechtsboven en rechtsonder zijn. Het werkt gewoon.
• In een verticale context (writing-mode: vertical-rl): De "breedte" van de kaart (nu zijn verticale inline-size) zal 300px zijn. De avatar zal naar de "bovenkant" (inline-start) floaten met een marge aan de "onderkant" (inline-end). De decoratieve rand zal aan de rechterkant zijn (inline-start), en de afgeronde hoeken zullen rechtsboven en linksboven zijn. Het component heeft zichzelf volledig correct geheroriënteerd zonder media queries of overrides.

Browserondersteuning en Fallbacks

Dit klinkt allemaal fantastisch, maar hoe zit het met de browserondersteuning? Het goede nieuws is dat de ondersteuning voor Level 1 logische properties uitstekend is in alle moderne browsers. Je kunt en zou vandaag de dag properties zoals margin-inline-start en padding-block moeten gebruiken.

Ondersteuning voor de nieuwere Level 2 functies verbetert snel, maar is nog niet universeel. De logische waarden voor float, clear en resize worden goed ondersteund. De logische border-radius-properties zijn het nieuwst en kunnen nog achter feature flags zitten of in recente browserversies. Zoals altijd moet je bronnen zoals MDN Web Docs of CanIUse.com raadplegen voor de meest actuele compatibiliteitsgegevens.

Strategieën voor Progressive Enhancement

Omdat CSS ontworpen is om veerkrachtig te zijn, kunnen we gemakkelijk fallbacks bieden voor oudere browsers. De cascade zorgt ervoor dat als een browser een logische property niet begrijpt, deze het simpelweg negeert en de fysieke property gebruikt die ervoor is gedefinieerd.

Zo kun je fallback-klare CSS schrijven:

.card {

  /* Fallback voor oudere browsers */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Moderne logische property die de fallback zal overschrijven */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Deze aanpak zorgt voor een solide basiservaring voor iedereen, terwijl het de verbeterde, adaptieve lay-out biedt voor gebruikers met moderne browsers. Voor projecten die geen meerdere schrijfmodi hoeven te ondersteunen, is dit misschien overbodig. Maar voor elke wereldwijde applicatie, design system of thema is dit een robuuste en toekomstbestendige strategie.

De Toekomst is Logisch: Voorbij Level 2

De overgang van een fysieke naar een logische denkwijze is een van de belangrijkste verschuivingen in moderne CSS. Het brengt onze stylingtaal in lijn met de realiteit van een divers, wereldwijd web. Het beweegt ons weg van breekbare, schermgeoriënteerde hacks naar veerkrachtig, content-georiënteerd ontwerp.

Zijn er nog hiaten? Een paar. Logische waarden voor properties zoals background-position of gradiënten worden nog besproken. Maar met de release van Level 2 kan de overgrote meerderheid van de dagelijkse lay-out- en stylingtaken nu worden uitgevoerd met een puur logische aanpak.

De oproep tot actie voor ontwikkelaars is duidelijk: begin standaard logische properties te gebruiken. Maak inline-size je eerste keus in plaats van width. Gebruik margin-inline in plaats van linker- en rechtermarges afzonderlijk in te stellen. Dit gaat niet alleen over het ondersteunen van verschillende talen; het gaat over het schrijven van betere, veerkrachtigere CSS. Een component dat met logische properties is gebouwd, is inherent beter herbruikbaar en aanpasbaar, of het nu wordt gebruikt in een LTR-, RTL- of verticale lay-out. Het is simpelweg betere engineering.

Conclusie: Omarm de Flow

CSS Logical Properties Level 2 is niet zomaar een verzameling nieuwe functies; het is de voltooiing van een visie. Het biedt de laatste, cruciale stukjes die nodig zijn om lay-outs te bouwen die de natuurlijke stroom van hun content respecteren, wat die stroom ook mag zijn. Door properties zoals float: inline-start en border-start-start-radius te omarmen, verheffen we ons vak van het simpelweg positioneren van dozen op een scherm tot het ontwerpen van echt wereldwijde, inclusieve en toekomstbestendige webervaringen.

De volgende keer dat je een nieuw project start of een nieuw component bouwt, pauzeer dan even voordat je margin-left typt. Vraag jezelf af: "Bedoel ik links, of bedoel ik het begin?" Door die kleine mentale verschuiving te maken, draag je bij aan een meer aanpasbaar en toegankelijk web voor iedereen, overal.